<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <div class="title">站房详情</div>
      </div>
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" :model="form.model" class="demo">
          <div class="form-section">
            <div class="form-section_title">基础信息</div>
            <AgelFormDesc :items="form.baseItems" :column="24"> </AgelFormDesc>
          </div>
          <div class="form-section">
            <div class="form-section_title">参数设置</div>
            <AgelFormDesc :items="form.propItems" :column="24"> </AgelFormDesc>
          </div>
          <div class="form-section">
            <div class="form-section_title">电费结算模式</div>
            <AgelFormDesc :items="form.eleItems" :column="24"> </AgelFormDesc>
          </div>
          <div class="form-section">
            <div class="form-section_title">施工图</div>
            <UploadImage v-model="form.model.attachments" :queryData="{ stationId: orderId, name: '施工图' }"> </UploadImage>
          </div>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleUpdate(form.model)" type="primary">编辑</el-button>
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="StationMessageInfo" lang="tsx">
import { getStation } from '@/api/station/index';
import { StationVO, StationForm, defaultStationModel } from '@/api/station/types';
import UploadImage from '../common/upload-image/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { epay_type, esettle_type } = toRefs<any>(proxy?.useDict('esettle_type', 'epay_type'));

const route = useRoute();
const orderId = toRef<string | null>(route.query.id as string)

const form = reactive({
  model: defaultStationModel(),
  baseItems: [
    { prop: "name", label: "站房名称", span: 6 },
    { prop: "contactUser", label: "责任人", span: 6 },
    { prop: "contactPhone", label: "联系电话", span: 6 },
    { prop: "regionName", label: "省市区", span: 6 },
    { prop: "location", label: "具体地址", span: 24 },
  ],
  propItems: [
     { prop: 'maxCap', label: '最大接入数量', attrs: { type: 'number' }, span: 6  },
    { prop: 'pmax', label: '站房压力上限(帕)', attrs: { type: 'number' }, span: 6  },
    { prop: 'pmin', label: '站房压力下限(帕)', attrs: { type: 'number' }, span: 6  },
    { prop: 'omax', label: '浓度上限(%)', attrs: { type: 'number' }, span: 6  },
    { prop: 'omin', label: '浓度下限(%)', attrs: { type: 'number' }, span: 6  },
    { prop: 'eprice', label: '单位电价(元)', attrs: { type: 'number' }, span: 6  },
    { prop: 'leakThreshold', label: '最低保压时长(小时)', attrs: { type: 'number' }, span: 6  },
    { prop: "plowDays", label: "持续欠压天数(天)", attrs: { type: 'number' }, span: 6 },
    { prop: "softExpansion", label: "是否开启软扩容", slot: 'el-switch', span: 6, attrs: { disabled: true, activeValue: 1, inactiveValue: 0, }, viewModel: false },
    { prop: "operationalMode", label: "是否开启调试模式", slot: 'el-switch', span: 6, attrs: { disabled: true, activeValue: '1', inactiveValue: '0', }, viewModel: false },
  ],
  eleItems: [
    {
      prop: "epayType", label: "类型", span: 6,
      viewFormat: ({ prop }: any) => { return (<dict-tag options = { epay_type.value } value = { form.model[prop as keyof StationForm] } />) }
    },
{
  prop: "esettleType", label: "结算模式", span: 6,
    viewFormat: ({ prop }: any) => {
      return (<dict-tag options = { esettle_type.value } value = { form.model[prop as keyof StationForm] } />)
    }
},
      // { prop: "esettleVendor", label: "商户名称", span: 6, },
  ],
fileItems: [
  { prop: "attachments", label: "添加图片", span: 24 },
],
})
const loading = ref(false)

/** 取消 */
const handleCancel = () => {
  // proxy?.$tab.closeOpenPage()
  proxy?.$tab.closePage();
}
/** 修改按钮操作 */
const handleUpdate = async (row?: StationVO) => {
  proxy?.$tab.openPage('/station/stationMessage/edit', '', { id: row?.stationId });
};

const getInfo = async (id: string) => {
  loading.value = true
  let res = await getStation(id)
  loading.value = false
  if (res.code == 200) {
    let data=res.data;
    data.omin/=10.0;
    data.omax/=10.0;
    data.leakThreshold/=(60*60);
    form.model = data
  } else {
    proxy?.$modal.msgError(res.msg || '信息获取失败！')
  }
}
if (orderId.value) {
  getInfo(orderId.value)
}
onMounted(() => {
})
</script>
